<template>
  <div style="margin-bottom: 20px">
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        <el-button type="primary">Save</el-button>
      </el-col>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple-light" />
        <el-switch
          v-model="article.status"
          class="mb-2"
          active-text="发布"
          inactive-text="草稿"
          active-value="1"
          inactive-value="0"
        />
      </el-col>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        <el-switch
          v-model="article.visibility"
          class="mb-2"
          active-text="公开"
          inactive-text="私有"
          active-value="Y"
          inactive-value="N"
        />
      </el-col>
    </el-row>
  </div>
  <div style="margin-bottom: 20px">
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />

        <span>
          <el-icon :size="20" @click="handleEdit('articleName')" style="cursor: pointer">
            <Edit />
          </el-icon>
          <span v-if="!editOpen.articleName" class="input-style">{{ article.articleName }}</span>
          <el-input
            v-else
            style="width: 60%"
            v-model="article.articleName"
            placeholder="Please input"
          />
        </span>
      </el-col>
      <el-col :span="4">
        <el-icon :size="20" @click="handleEdit('author')" style="cursor: pointer">
          <Edit />
        </el-icon>
        <span v-if="!editOpen.author" class="input-style">{{ article.author }}</span>
        <el-input v-else style="width: 60%" v-model="article.author" placeholder="Please input" />
      </el-col>
      <el-col :span="4" >
        <el-tag  effect="dark" round> 运维 </el-tag>
      </el-col>
    </el-row>
  </div>
  <div>
    <Editor :value="value" :plugins="plugins" @change="handleChange" />
  </div>
</template>
<script setup>
  import { Edit } from '@element-plus/icons-vue';
  import 'bytemd/dist/index.css';
  import gfm from '@bytemd/plugin-gfm';
  import frontmatter from '@bytemd/plugin-frontmatter';
  import highlight from '@bytemd/plugin-highlight';
  import { useRoute } from 'vue-router';
  import { getArticleById } from '../../../api/blog/article';
  import { Editor, Viewer } from '@bytemd/vue-next';
  import { onMounted, ref } from 'vue';

  const value3 = ref(false);
  const route = useRoute();
  const article = ref({
    status: '',
    visibility: '',
  });
  const value = ref('');
  const editOpen = ref({
    articleName: false,
    author: false,
  });
  //-----------------控件控制------------------
  const handleEdit = (data) => {
    editOpen.value[data] = !editOpen.value[data];
  };

  //-----------------调用后台API------------------
  const getArticle = async (id) => {
    const parmas = { id: id };
    const res = await getArticleById(parmas);
    article.value = res.data;
    value.value = article.value.content;
    console.log(res.data);
  };

  //------------------生命周期调用------------------
  onMounted(() => {
    getArticle(route.params.id);
  });

  const plugins = [gfm(), frontmatter(), highlight()];

  const handleChange = (v) => {
    value.value = v;
    console.log('content has changed');
  };
</script>
<style>
  .bytemd {
    height: calc(100vh - 200px);
  }
  .input-style {
    font-size: medium ;
    font-weight: 600;
  }
</style>
